<template>
  <div>
    <el-card id="maxBox">
      <el-form :inline="true">
        <div class="search">
          <el-form-item label="学科名称">
            <el-input
              v-model="reParams.subjectName"
              placeholder="请输入学科名称"
            />
          </el-form-item>

          <div class="btn">
            <el-button @click="clearn">清除</el-button>
            <el-button type="primary" @click="searchS">搜索</el-button>
            <el-button type="success" @click="ON"  :icon="Edit" id="threeBtn">新增学科</el-button>
          </div>
        </div>
      </el-form>
      <!-- 提示 -->
      <el-alert
        :title="`数据一共${total}条`"
        type="info"
        :closable="false"
        show-icon
      />
      <!-- 表格 -->

      <div class="page">
        <el-table :data="tableData">
          <el-table-column prop="id" label="序号" width="180" type="index" />
          <el-table-column prop="subjectName" label="学科名称" width="180" />
          <el-table-column prop="username" label="创建者" />
          <el-table-column prop="addDate" label="创建日期" />
          <el-table-column label="前台是否显示">
            <template v-slot="scope">
              {{ scope.row.isFrontDisplay === 1 ? '是' : '否' }}
            </template>
          </el-table-column>
          <el-table-column prop="twoLevelDirectory" label="二级目录" />
          <el-table-column prop="tags" label="标签" />
          <el-table-column prop="totals" label="题目数量" />
          <el-table-column label="操作" width="240px">
            <template v-slot="scope">
              <el-link
                type="primary"
                :underline="false"
                @click="toCatalog(scope.row)"
                >学科分类</el-link
              >
              <el-link
                type="primary"
                :underline="false"
                @click="toTag(scope.row)"
                >学科标签</el-link
              >
              <el-link
                type="primary"
                :underline="false"
                @click="changSubject(scope.row)"
                >修改</el-link
              >

              <el-link
                type="primary"
                :underline="false"
                @click="open(scope.row.id)"
                >删除</el-link
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="pageS">
        <el-pagination
          background
          layout="prev, pager, next,sizes,jumper"
          :total="total"
          :page-sizes="[5, 10, 20, 50]"
          v-model:page-size="reParams.pagesize"
          v-model:current-page="reParams.page"
          @current-change="changePage"
          @size-change="changeSize"
        />
      </div>
    </el-card>
    <!--添加 弹窗 -->
    <el-dialog
      v-model="dialogFormVisible"
      :title="ishowADD ? '新增学科' : '修改学科'"
      width="400px"
    >
      <el-form :model="form" :rules="rules">
        <el-form-item label="学科名称" prop="subjectName">
          <el-input v-model="form.subjectName" autocomplete="off" type="text" />
        </el-form-item>
        <!-- 开关 -->
        <el-form-item label="是否显示">
          <el-switch
            v-model="form.isFrontDisplay"
            :active-value="1"
            :inactive-value="0"
            style="
              --el-switch-on-color: #13ce66;
              --el-switch-off-color: #ff4949;
            "
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="isOk(form)"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {  Edit  } from '@element-plus/icons-vue'
import { ElMessageBox, ElMessage } from 'element-plus/es';
// import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
import {  ref } from 'vue'
import {
  getSubjectList,
  delSubjectList,
  addSubjectName,
  changeSubjectName
} from '@/api/subject'
import { useRouter } from 'vue-router'
// 引入moment模块
import moment from 'moment'
// import { id } from 'element-plus/es/locale'
// const value2 = ref(true)

// 弹窗
const dialogFormVisible = ref(false)

// 分页：
const reParams = ref({
  // 页码
  page: 1,
  // 页码大小
  pagesize: 10,
  //
  subjectName: null
})

const tableData = ref([])
// 格式化时间
const timePro = ref('')
const total = ref(0)

// 获得学科列表
async function getsubjectName() {
  const res = await getSubjectList(reParams.value)
  console.log(res.data)
  tableData.value = res.data.items
  // 格式时间
  const timeList = res.data.items
  timePro.value = timeList.map(
    item => (item.addDate = moment(item.addDate).format('YYYY-MM-DD'))
  )

  total.value = res.data.counts
  // console.log(tableData.value,'1111111111111111111');
}
// console.log('格式后',timePro);
getsubjectName()
// 改变页码
function changePage() {
  // console.log(reParams.value.page, 555)
  getsubjectName()
}
function changeSize() {
  // 页码变成1
  reParams.value.page = 1
  getsubjectName()
}
// 搜索功能
function searchS() {
  reParams.value.page = 1
  getsubjectName(reParams.value)
}
// 清空功能
function clearn() {
  reParams.value = {
    // 页码
    page: 1,
    // 页码大小
    pagesize: 10,
    //
    subjectName: null
  }
  getsubjectName()
}
// 跳转目录页面

const router = useRouter()
function toCatalog(row) {
  const { id, subjectName: name } = row
  router.push({ path: '/subjects/directory', query: { id, name } })
}
// 去标签页面
function toTag(row) {
  const { id, subjectName: name } = row
  router.push({ path: '/subjects/tags', query: { id, name } })
}
// 校验规则
const rules = ref({
  // name:[{required:true , message:'名字不能为空' ,trigger:'blur'}]
  subjectName: [{ required: true, message: '请填写学科名字', trigger: 'blur' }]
})
// 新增学科
// 新增判断
const ishowADD = ref(false)
// 修改判断

// 表单数据
const form = ref({})
// 新增打开弹窗
function ON() {
  (ishowADD.value = true), (dialogFormVisible.value = true)
}
// 修改学科 打开弹窗

function changSubject(row) {
  // console.log('row1111',row.value);
  dialogFormVisible.value = true
  ishowADD.value = false

  // 测试
  form.value = { ...row }
  // form=row
  console.log(form.value, '赋值后的form 修改前')
  // const {subjectName , id} = row
}


async function isOk(form) {
  // 新增
  if (ishowADD.value === true) {
    await addSubjectName(form)
    getsubjectName()
    form.subjectName = ''
    dialogFormVisible.value = false
  }
  // 修改
  else {

    console.log('form.value', form.value)

    await changeSubjectName(form)
    console.log('form修改后', form)
    getsubjectName()
    dialogFormVisible.value = false
  }
}

// 删除学科
const open = id => {
  ElMessageBox.confirm('你确定要永久删除学科信息吗?', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      await delSubjectList({ id }), getsubjectName()
      ElMessage({
        type: 'success',

        message: '删除成功'
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled'
      })
    })
}
</script>

<style lang="scss" scoped>
// 输入框
.el-input{
  width:200px ; 
}
:deep(.el-table th){
  background-color: #f4f4f5;

}
.search {
  display: flex;
  align-items: center;
  // padding: 20px 30px 20px 10px;`
}
#maxBox {

margin-top: 5px;

}
.search .btn {
  display: inline-block;

  margin-bottom: 20px;
  width: 1400px;
}
// .el-alert {
//   margin: 10px 0 0;
// }
// .el-alert:first-child {
//   margin: 0;
// }
// 分頁
.page {
  margin: 20px 0;
}
// 文字按钮样式
// 清除下划线
.el-link {
  margin-right: 10px;
}
.el-button:last-child{
  float: right;
}
.pageS{
  float: right;
  margin-bottom: 20px;
  margin-right: 20px;
}
</style>
